<template>
	<view class="sharebtn">
		<view class="uni-share">
			<view class="uni-share-content">
				<view v-for="(item, index) in bottomData" :key="index" class="uni-share-content-box" @click='btnShare(index)'>
					<view class="uni-share-content-image">
						<image :src="item.icon" class="content-image" :class="{lastimg:index==bottomData.length-1}" />
					</view>
					<text class="uni-share-content-text">{{ item.text }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bottomData: [{
						text: '微信',
						icon: '/static/img/share_weixin.png',
						name: 'wx'
					},
					{
						text: '朋友圈',
						icon: '/static/img/share_weixin_timeline.png',
						name: 'copy'
					},
					// {
					// 	text: 'QQ',
					// 	icon: '/static/index/qq.png',
					// 	name: 'qq'
					// },
					{
						text: '复制',
						icon: '/static/img/copy.png',
						name: 'copy'
					}
				],
				// sharedataTemp: {
				// 	type: 0,
				// 	strShareUrl: "https://uniapp.dcloud.io",
				// 	strShareTitle: "分享标题",
				// 	strShareSummary: "分享总结",
				// 	strShareImageUrl: "/static/sharemenu/copyurl.png"
				// }
			}
		},
		props: ["sharedataTemp"],
		// onLoad() {
		// 	console.log('sharedataTemp',this.sharedataTemp);
		// },
		methods: {
			btnShare(ind) {
				console.log(ind);
				var strProvider = "",
					strScene = "",
					mytype = '';
				switch (ind) {
					case 0:
						strProvider = "weixin"
						strScene = "WXSceneSession"
						mytype = 0
						break;
					case 1:
						strProvider = "weixin"
						strScene = "WXSenceTimeline"
						mytype = 0
						break;
					// case 2:
					// 	strProvider = "qq"
					// 	mytype = 1
					// 	break;
					case 2:
						uni.setClipboardData({
							data: this.sharedataTemp.strShareUrl,
							complete() {
								uni.showToast({
									title: "已复制到剪贴板"
								})
							}
						})
						break;
				}
				if (strProvider != "") { //点击了0-3序号的这4个按钮
					uni.share({
						provider: strProvider,
						scene: strScene,
						type: mytype,
						href: this.sharedataTemp.strShareUrl,
						title: this.sharedataTemp.strShareTitle,
						summary: this.sharedataTemp.strShareSummary,
						imageUrl: this.sharedataTemp.strShareImageUrl,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 底部分享 */
	.sharebtn {
	}
	.uni-share {
		width: 690rpx;
		margin: 30rpx;
		border-radius: 30rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		background-color: #fff;
		
	}
	.uni-share-content {
		/* #ifndef APP-NVUE */
		display: flex;
		overflow-x: scroll;
		/* #endif */
		
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		
		padding: 15px 50rpx;
	}
	.uni-share-content-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		// width: 25%;
		// justify-content: space-between;
		margin-right: 60rpx;
	}
	// .uni-share-content-box:nth-last-child(1) {
	// 	margin-right: 0;
	// }
	.uni-share-content-image {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 90rpx;
		height: 90rpx;
		overflow: hidden;
		border-radius: 10rpx;
		
	}
	.content-image {
		width: 90rpx;
		height: 90rpx;
	}
	.lastimg {
		width: 50rpx!important;
		height: 50rpx!important;
	}
	.uni-share-content-text {
		font-size: 26rpx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}
</style>
